<template>
  <!--轮播内部滚动-->
  <section ref="Isfrs">
    <div class="spell">
      <div class="Tilws"
           v-for="(item, key) in paginationList"
           :key="key">
        <img src="../../../assets/001.jpg" alt="">
        <p>拼<span>￥</span><span class="price">{{item}}</span></p>
      </div>
    </div>
  </section>
</template>

<script>
  import BScroll from 'better-scroll'
    export default {
        name: "Isfrseeding",
      data(){
          return{
            paginationList: [1, 2, 3, 4, 5],
          }
      },
      computed: {
      },
      mounted() {
          let isfrs = this.$refs.Isfrs;
        new BScroll(isfrs, {
            click:true,
            scrollX: true
          });
      }
    }
</script>

<style scoped lang="scss">
  section{
    overflow-X: auto;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .spell{
      width: 260px*5;
      height: 100%;
      .Tilws{
        display: inline-block;
        width: 260px;
        height: 450px;
        box-sizing: border-box;
        img{
          width: 100%;
          height: 260px;
          border-radius: 20px;
        }
        p{
          color: #a6a6a6;
          font-size: 30px;
          span{
            color: #ec685b;
            font-size: 24px;
          }
          .price{
            font-size: 43px;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>
